<template>
  <div class="member-home">
    <!-- 概览 -->
    <HomeOverview />
    <!-- 收藏 -->
    <HomePanel title="我的收藏">
      <GoodsItem v-for="find in findList" :key="find.id" :good='find'></GoodsItem>
    </HomePanel>
    <!-- 足迹 -->
    <HomePanel title="我的足迹" v-if="browse">
       <GoodsItem v-for="item in browse" :key="item.spu.id" :good='item.spu'></GoodsItem>
    </HomePanel>
    <!-- 猜你 -->
    <GoodsRelevant />
  </div>
</template>

<script>
import HomeOverview from './components/home-overview.vue'
import HomePanel from './components/home-panel.vue'
import GoodsRelevant from '@/views/goods/components/goods-relevant.vue'
import GoodsItem from '@/views/category/components/goods-item.vue'
import { findCollect, browseHistory } from '@/api/index.js'
import { ref } from 'vue'
export default {
  name: 'MemberHome',
  components: { HomeOverview, HomePanel, GoodsRelevant, GoodsItem },
  setup () {
    const findList = ref(null)
    findCollect({ page: 1, pageSize: 4 }).then(res => {
      console.log(res)
      findList.value = res.items
    })

    const browse = ref(null)
    browseHistory({ page: 1, pageSize: 4 }).then(res => {
      console.log(res)
      browse.value = res.items
      console.log(browse.value)
    })

    return { findList, browse }
  }
}
</script>

<style scoped lang="less">
:deep(.xtx-carousel) .carousel-btn.prev {
  left: 5px;
}
:deep(.xtx-carousel) .carousel-btn.next {
  right: 5px;
}
</style>
